import React, { Component, useState, useEffect } from 'react';
import { Platform, StyleSheet, Text, View, Image, TouchableOpacity, Dimensions, Animated } from 'react-native';
import styles from '../styles/style'
import { sendData } from '../utils/request';
import api from '../utils/api';
import Card from '../component/Card'
import Loading from '../component/Loading'
import { ScrollView } from 'react-native-gesture-handler';
const WIDTH = Dimensions.get('window').width
export default function Detail({ navigation }) {
    const [program_id, setProgramId] = useState(navigation.state.params.program_id)
    const [tabIndex, setTabIndex] = useState(0)
    const [translateValue, setTranslateValue] = useState(new Animated.ValueXY({ x: 0, y: 0 }))
    const [expand, setExpand] = useState(false)
    const [days, setDays] = useState([1, 2, 3])
    const [loaded, setLoaded] = useState(false)
    const [detail, setDetail] = useState(null)
    useEffect(() => {
        // setProgramId()
        getDetail()
    }, [])
    const getDetail = () => {
        sendData({
            url: api.detail,
            method: 'get',
            params: { program_id: program_id }
        }).then(data => {
            // debugger
            console.log(data)
            setDetail(data.data)
            setLoaded(true)
        })
    }

    const tapTab = (index) => {
        setTabIndex(index)
        Animated.timing(
            translateValue,
            {
                toValue: {
                    x: (index == 0 ? 0 : 1) * WIDTH / 2,
                    y: 0
                },
                duration: 100,
                delay: 0,
                useNativeDriver: true
            }
        ).start();
    }

    const next = () => {
        navigation.push('Onboarding')
    }


    const renderOverview = () => {
        return <View>
            {
                detail.instructor && <View style={styles.detail_group}>
                    <Text style={[styles.text_333, styles.text_bold]}>Coach's Overview</Text>
                    <View style={styles.detail_group_space} />
                    <View style={styles.detail_group_content}>
                        <Image style={styles.coach_avatar} source={{ uri: detail.instructor.avatar }} />
                        <View>
                            <Text style={styles.text_666}>{detail.instructor.name}</Text>
                            <Text style={styles.text_666}>Coach Description</Text>
                        </View>
                    </View>
                </View>
            }

            <View style={styles.detail_group}>
                <Text style={[styles.text_333, styles.text_bold]}>Program Description</Text>
                <View style={styles.detail_group_space} />
                <Text style={[styles.text_666, styles.detail_group_content]}>{detail.description}</Text>
            </View>
            <View style={styles.detail_group}>
                <Text style={[styles.text_333, styles.text_bold]}>What you'll gain</Text>
                <View style={styles.detail_group_space} />
                {
                    detail.value_proposition.map((item, index) => {
                        return <View style={styles.detail_group_content} key={index}>
                            <Image style={styles.check_img} source={require('../resource/check_circle.png')} />
                            <Text style={styles.text_666}>{item}</Text>
                        </View>
                    })
                }
            </View>
        </View>
    }

    const renderWorkouts = () => {
        return <View>
            <View style={styles.detail_group}>
                <TouchableOpacity style={styles.workout_item} onPress={() => expandWorkout()}>
                    <View style={styles.workout_item_left}></View>
                    <Text style={[styles.text_666, styles.text_bold, styles.expand]}>Tips for your first week</Text>
                    <Image style={styles.arrow} source={expand ? require('../resource/arrow_up.png') : require('../resource/arrow_down.png')} />
                </TouchableOpacity>
                {
                    expand && days.map((item, index) => {
                        return <View key={index} style={[styles.workout_item, { marginTop: 10 }]}>
                            <View style={styles.workout_item_left}></View>
                            <Text style={[styles.text_666, styles.text_bold, styles.expand]}>Day {item}</Text>
                            <TouchableOpacity style={styles.watch} onPress={() => goWorkout()}>
                                <Text style={[styles.text_white, styles.text_bold]}>Start</Text>
                            </TouchableOpacity>
                        </View>
                    })
                }
            </View>
        </View>
    }

    const expandWorkout = () => {
        setExpand(!expand)
    }

    const goWorkout = () => {
        navigation.push('Workout')
    }

    return (
        !loaded ? <Loading /> :
            <ScrollView style={styles.container}>
                <View style={styles.detail_header}>
                    <Card data={detail} />
                </View>
                <View style={styles.detail_tabbar}>
                    <TouchableOpacity style={styles.detail_tabbar_item} onPress={() => tapTab(0)}>
                        <Text style={[tabIndex == 0 ? styles.text_333 : styles.text_666, styles.text_bold]}>OVERVIEW</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.detail_tabbar_item} onPress={() => tapTab(1)}>
                        <Text style={[tabIndex == 1 ? styles.text_333 : styles.text_666, styles.text_bold]}>WORKOUTS</Text>
                    </TouchableOpacity>
                    {/* <View style={styles.selLine} /> */}
                    <Animated.View style={[styles.selLine, {
                        transform: [{ translateX: translateValue.x },
                        { translateY: translateValue.y }]
                    }]}></Animated.View>
                </View>
                {
                    tabIndex == 0 ? renderOverview() : renderWorkouts()
                }
                <View style={styles.row_center}>
                    <TouchableOpacity style={styles.start_btn} onPress={() => next()}>
                        <Text style={[styles.text_white, styles.text_bold]}>Start Program</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
    )

}